<template>
  <el-dialog title="站点可发货国家配置" width="720" :modelValue="modelValue" @close="handleClose" draggable align-center :close-on-click-modal="false">
    <el-form :inline="true" :model="formInline" labelPosition="top" class="form-inline">
      <el-table :data="formInline.tableData" border style="width: 100%">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column label="经营站点" width="180">
          <template #default="{ row }">
            <el-select v-model="row.site_id" placeholder="站点" class="w-[100%]" disabled>
              <el-option v-for="item in siteCountryOpt" :key="item.site_id" :label="item.site_name" :value="item.site_id" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="发货国家">
          <template #default="{ row }">
            <VSelect v-model="row.countries" clearable :options="countryList" class="w-[100%]" multiple collapse-tags />
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="save"> 确认 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import NumberRange from "@/components/NumberRange/index.vue"
import { amazonSalesSetting, amazonSalesVolume } from "@/api/amazon"
import { ElMessage } from "element-plus"
import { siteCountryList, bindSiteCountry, countryGetList } from "../api.js"
const emit = defineEmits(["refresh"])
const props = defineProps({})
const modelValue = ref(false)

const formInline = ref({
  tableData: [],
})

onMounted(async () => {
  getOpt()
})

const handleClose = () => {
  modelValue.value = false
  formInline.value = { tableData: [] }
}
const save = () => {
  let site_countries = formInline.value.tableData.map((v) => ({ site_id: v.site_id, countries: v.countries }))
  site_countries = site_countries.filter((v) => v.countries.length)
  let params = {
    platform_id: 67,
    site_countries,
  }
  bindSiteCountry(params).then((res) => {
    handleClose()
    ElMessage.success("保存成功")
    emit("refresh")
  })
}
const open = () => {
  modelValue.value = true
  getSiteCountry()
}
const getSiteCountry = async () => {
  let opt = await siteCountryList({ platform_id: 67 })
  siteCountryOpt.value = opt.data
  formInline.value.tableData = siteCountryOpt.value
}
const siteCountryOpt = ref([])
const countryList = ref([])
const getOpt = async () => {
  const country = await countryGetList()
  countryList.value = country.data.map((v) => ({ label: v.name, value: v.country }))
}
defineExpose({
  open,
})
</script>
<style lang="scss" scoped></style>
